<script setup>
    import { ref } from 'vue';
    import { useRouter } from 'vue-router'; 
    import { userStore } from "../stores/userStore";
    const store=userStore();
    
    const router = useRouter();
    const name = ref("");
    const gender = ref("");
    const job = ref("");
    const password = ref("");
    const dialogVisible = ref(false);

    const onSubmit = () => {
        const user={
            username:name.value,
            gender:gender.value,
            job:job.value,
        }
        //更新到userStore中的user
        store.login(user);

        dialogVisible.value = true;
    };
    const handleConfirm = () => {
        dialogVisible.value = false;
        router.push('/5_profile2');
    };
</script>
<template>
    <el-container>

        <el-main class="main">
            <el-form label-width="auto" style="max-width: 600px;margin: 80px auto;">
                <h2>登录</h2>
                <el-form-item label="用户名">
                    <el-input v-model="name" />
                </el-form-item>
                <el-form-item label="性别">
                    <el-radio-group v-model="gender">
                        <el-radio label="男">男</el-radio>
                        <el-radio label="女">女</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="职位">
                    <el-input v-model="job" placeholder="请输入职位" />
                </el-form-item>
                <el-form-item label="密码">
                    <el-input v-model="password" type="password"/>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="onSubmit">登录</el-button>
                </el-form-item>
            </el-form>
        </el-main>
            
    </el-container>

    <!-- 对话框 -->
    <el-dialog v-model="dialogVisible" title="请确认登录信息" width="500">
        <div style="display: flex;flex-direction: column;">
            <span>用户名：{{name}}</span>
            <span>性别：{{gender}}</span>
            <span>职位：{{job}}</span>
            <p>即将跳转到个人页面</p>
        </div>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="dialogVisible = false">取消</el-button>
                <el-button type="primary" @click="handleConfirm">确定</el-button>
            </div>
        </template>
    </el-dialog>
</template>
<style scoped>   
    .main{
            width: 1200px;
            margin: 0 auto;
            min-height: calc(100vh - 180px);                        /* '-' 的左右要有空格 */
        }
    a{text-decoration: none;}
</style>
